<template>
	<div>
		<el-scrollbar :height="isTagsview ? `calc(100vh - 154px)` : `calc(100vh - 120px)`">
			<zh-space>
				<zh-card title="">
					<zh-form ref="roleQueryFrom" :model="state.queryRoleParam">
						<zh-form-input prop="roleName" label="角色名称" placeholder="支持模糊查询" v-model="state.queryRoleParam.roleName"></zh-form-input>
						<zh-form-select
							prop="appId"
							:lazy="true"
							label="所属应用"
							v-model="state.queryRoleParam.appId"
							:fieldNames="{ label: 'appName', value: 'appId' }"
							funcCode="application0012"
							searchField="appName"
						></zh-form-select>
						<zh-form-query :disabled="props.disabled" :form-ref="roleQueryFrom" :table-ref="roleListTable" :show-advanced="false"></zh-form-query>
					</zh-form>
				</zh-card>
				<zh-table ref="roleListTable" :rowConfig="{ keyField: 'roleId' }" title="角色列表" :funcCode="funcCode" :columns="roleColumn">
					<template #status_default="{ row }"> <zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" /> </template
				></zh-table>
			</zh-space>
		</el-scrollbar>
		<zh-dialog :title="state.dailogTitle" :width="state.dailogWidth" v-model="state.roleVisible" @confirm="saveRole">
			<AddRoleModule v-if="type === 'org'" ref="addRoleModuleRef" v-model="state.roleVisible" :id="id" :type="type" />
			<add-router-role-module v-if="type === 'router'" ref="addRouterRoleRef" :id="id" :type="type" />
			<AddAppMenuRoleModule v-if="type === 'menu'" ref="addAppMenuRoleRef" :id="id" :type="type" />
		</zh-dialog>
	</div>
</template>

<script lang="ts" setup name="RoleModule">
import type { FormInstance } from 'element-plus';
import AddRoleModule from './AddRoleModule.vue';
import AddAppMenuRoleModule from '@/views/system/config/appMenu/component/AddAppMenuRoleModule.vue';
import AddRouterRoleModule from '@/views/system/config/router/component/AddRouterRoleModule.vue';
const { isTagsview } = storeToRefs($store.theme);
//------------------接收传入参数------------------------
const props = defineProps({
	id: {
		type: String,
	},
	type: {
		type: String,
	},
	disabled:{
		type: Boolean,
		default: false,
	},
});
//-------------------获取接口-------------------------------
//-------------------组件ref定义-----------------------------
const roleQueryFrom = ref<FormInstance>();
const roleListTable = ref<any>({});
const addRoleModuleRef = ref<any>({});
const addRouterRoleRef = ref<any>({});
const addAppMenuRoleRef = ref<any>({});

//-------------------内部变量定义---------------------------
const state = reactive({
	queryRoleParam: {
		roleName: null,
		roleTypes: [],
		searchType: '2',
		status: '1',
	} as any,
	dictData: {} as any,
	funcCode: '',
	roleColumn: [
		{ type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'roleId', title: '角色Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'roleName', title: '角色名称', align: 'center', fixed: 'left', minWidth: 200 },
		{ field: 'parentId', title: '父角色Id', visible: false, align: 'center', minWidth: 200 },
		{ field: 'roleType', title: '角色类型', visible: false, align: 'center', width: 100 },
		{ field: 'roleTypeName', title: '角色类型', align: 'center', width: 150 },
		{
			field: 'status',
			title: '状态',
			align: 'center',
			width: 80,
			slots: {
				default: 'status_default',
			},
		},
		{ field: 'appId', title: '应用id', visible: false, align: 'center', width: 100 },
		{ field: 'appName', title: '所属应用', align: 'center', width: 300 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, minWidth: 250 },
	],
	roleVisible: false,
	dailogTitle: '角色授权',
	dailogWidth: '80%',
	name: '',
});
const { funcCode, roleColumn } = toRefs(state);
//------------------------------内部变量定义-----------------------------------------------
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
//--------------------------------------定义调用方法-----------------------------------------
//角色列表查询
const onRoleQuery = () => {
	if (!props.id) {
		return;
	}
	if (props.disabled) {
		return;
	}
	console.log('state.queryRoleParam', state.queryRoleParam);
	roleListTable.value.query(state.queryRoleParam);
};
//打开添加角色页面
function openRoleModule() {
	if (props.type === 'org') {
		state.dailogTitle = '组织添加到角色';
		if (!props.id) {
			$messageBox.warning('请先传入需要授权的组织', '提示');
			return false;
		}
	} else if (props.type === 'router') {
		state.dailogTitle = '路由功能添加到角色';
		state.dailogWidth = '100%';
		if (!props.id) {
			$messageBox.warning('请先传入需要授权的路由', '提示');
			return false;
		}
	} else if (props.type === 'menu') {
		state.dailogTitle = 'appmenu功能添加到角色';
		state.dailogWidth = '100%';
		if (!props.id) {
			$messageBox.warning('请先传入需要授权的appmenu', '提示');
			return false;
		}
	} else {
		$messageBox.error('类型未定义', '提示');
		return false;
	}
	state.roleVisible = true;
}
function saveRole() {
	const params: any = {};
	let funcCode = '';
	if (props.type === 'org') {
		if (!props.id) {
			$messageBox.warning('请先传入需要授权的组织', '提示');
			return false;
		}
		const roleIds = addRoleModuleRef.value.getCheckedRoleIds();
		if (!roleIds) {
			return false;
		}
		params.orgId = props.id;
		params.roleIds = roleIds;
		funcCode = 'org0014';
	} else if (props.type === 'user') {
		if (!props.id) {
			$messageBox.warning('请先传入需要授权的用户', '提示');
			return false;
		}
		params.userId = props.id;
		funcCode = 'user0018';
	} else if (props.type === 'router') {
		if (!props.id) {
			$messageBox.warning('请先传入需要授权的路由', '提示');
			return false;
		}
		funcCode = 'router0021';
		params.routerId = props.id;
		const sysIds = addRouterRoleRef.value.getSysIds();
		params.sysIds = sysIds;
		const roleIds = addRouterRoleRef.value.getCheckedRoleIds();
		params.roleIds = roleIds;
	} else if (props.type === 'menu') {
		if (!props.id) {
			$messageBox.warning('请先传入需要授权的appmenu', '提示');
			return false;
		}
		funcCode = 'appmenu0015';
		params.menuId = props.id;
		//const sysIds = addAppMenuRoleRef.value.getSysIds();
		//params.sysIds = sysIds;
		const roleIds = addAppMenuRoleRef.value.getCheckedRoleIds();
		params.roleIds = roleIds;
	} else {
		$messageBox.error('类型未定义', '提示');
		return false;
	}
	setTimeout(() => {
		$api.common.send
			.post(funcCode, params)
			.then(() => {
				$messageBox.success('保存成功', '成功提示');
				onRoleQuery();
				state.roleVisible = false;
			})
			.catch(() => {});
	}, 50);
}
const deleteRole = () => {
	//获取勾选数据
	const checkedList = roleListTable.value.getAllCheckboxRecords();
	if (props.id) {
		if (checkedList && checkedList.length > 0) {
			let roleIds: any = [];
			checkedList.forEach((item: any) => {
				roleIds.push(item.roleId);
			});
			if (props.type === 'router') {
				const params = { routerId: props.id, roleIds: roleIds };
				$api.common.send.post('router0022', params).then(() => {
					$messageBox.success('删除成功', '提示');
					onRoleQuery();
				});
			} else if (props.type === 'org') {
				const params = {
					roleIds: roleIds,
					orgId: props.id,
				};
				$api.common.send
					.post('org0021', params)
					.then(() => {
						$messageBox.success('删除成功', '成功提示');
						onRoleQuery();
					})
					.catch(() => {});
			} else if (props.type === 'menu') {
				const params = { menuId: props.id, roleIds: roleIds };
				$api.common.send.post('appmenu0016', params).then(() => {
					$messageBox.success('删除成功', '提示');
					onRoleQuery();
				});
			}
		} else {
			$messageBox.warning('请先选择需要删除的角色', '提示');
			return;
		}
	} else {
		$messageBox.warning('请先选择需要删除角色的节点', '提示');
		return;
	}
};
//-------------------设置给父组件调用的方法------------------
defineExpose({
	onRoleQuery,
	openRoleModule,
	saveRole,
	deleteRole,
});
//--------------------页面初始化---------------------------------
onMounted(() => {
	if (props.id) {
		state.queryRoleParam[props.type + 'Id'] = props.id;
	}
});
if (props.type === 'router') {
	state.funcCode = 'router0023';
	state.name = '路由';
}
if (props.type === 'menu') {
	state.funcCode = 'appmenu0014';
	state.name = '手机路由';
}
if (props.type === 'org') {
	state.funcCode = 'org0013';
	state.name = '组织';
}
// 初始化数据
const params = {
	dictFields: 'roleType',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
//--------------------监听变动数据-----------------------------
watch(
	() => props.id,
	(id) => {
		if (id) {
			state.queryRoleParam[props.type + 'Id'] = id;
			onRoleQuery();
		} else {
			//清空表格
			roleListTable.value.setData([]);
		}
	}
);
</script>
<style lang="scss" scoped></style>
